<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Title</title>
    <script src="/static/resource/js/jquery.min.js"></script>
    <link  href="http://liyi.xibeidev.com:877/resource/valentine/css/cropper.css" rel="stylesheet">
    <link  href="http://static.zhenxuan.xibei.com.cn/public/static/home/js/layer_mobile/need/layer.css?2.0" rel="stylesheet">
    <script src="http://liyi.xibeidev.com:877/resource/valentine/js/cropper.js"></script>
    <script src="http://static.zhenxuan.xibei.com.cn/public/static/home/js/layer_mobile/layer.js"></script>
</head>
<body>
 <style type="text/css">
        .box {
            width: 1000px;
            height: 1200px;
            border:1px solid red;
        }
        .btn{
            font-size: 30px;
        }
    </style>
 <div class="btn">
     <button id="commit">确认</button>
     <button id="rotate">旋转</button>
 </div>
<div class="box">
    <img id="image" src="{$img_url}">
</div>

<!--剪切后预览图片-->
<!--<img id="yulan">-->
<!--<img src="" alt="" id="result" width="36" height="36" style="display:block;vertical-align: top;margin-top: 5px;"/>-->
<img src="/static/resource/album/bg.png" style="display:none" id="myimg" crossOrigin="Anonymous">
<script>
   function getRoundedCanvas(sourceCanvas) {
        var myImage = document.getElementById('myimg');
        console.log(myImage);
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        var mywidth = width * 1.2;
        var myheight = height * 1.27;
        console.log(myheight);
        console.log(height);
        var cx = width * 0.12;
        var cy = height * 0.13;
        canvas.width = mywidth;
        canvas.height = myheight;
        context.drawImage(sourceCanvas, cx, cy  , width, height);
        context.drawImage(myImage, 0, 0, mywidth, myheight);
        return canvas;
    }

    //旋转图片
    $("#rotate").click(function(){
        $("#image").cropper('rotate',30)
    })

    //确定裁剪
    $("#commit").on("click",function(){
        $image = $('#image');
        croppedCanvas = $image.cropper('getCroppedCanvas');
        // Round
        roundedCanvas = getRoundedCanvas(croppedCanvas);
        var base64 = roundedCanvas.toDataURL('image/png'); // 转换为base64
        var img_url = $('#image').attr('src');
        $.ajax({
            type:"POST",
            url:"{:url('index')}",
            data:{base64:base64,img_url:img_url},
            dataType:"json",
            success:function (msg) {
                if(msg.code == 1){
                    window.location.href = "imgshow?i="+msg.i;
                }
            }
        })
    })

    //初始化  可以给#image元素一张默认图片 就可以直接看效果
    $('#image').cropper({  //这里是给img 即被裁剪的图片进行参数配置
           aspectRatio: 4 / 3,//裁剪框的比例
           guides:false,   //裁剪框内虚线
           crop: function(data) {
               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
               $('#x').val(data.x);
               $('#y').val(data.y);
               console.log(data)
               //console.log('w'+data.width+'   height'+data.height);
           }  
        });
</script>
</body>
</html>